﻿@model BudgetMealsUI.Models.RecipeSelectorViewModel

<div id="RecipeSelector">
    @if (Model.Recipe != null && !string.IsNullOrEmpty(Model.SearchString))
    {
        if (Model.PagingInfo.HasPreviousPage)
        {
            <span class="pseudoLink" onclick="ShiftRecipe(-1)" style="float: left">&lt;</span>
        }

        <div id="RecipeSelectorContent" style="float: left;">
            <h2>@Model.Recipe.Name</h2>
            <div>
                Ingredients:
                @if (Model.Recipe.Ingredients != null)
                {
                    foreach (var ingredient in Model.Recipe.Ingredients)
                    {
                        @ingredient.Name
                        @:&nbsp;
                    }
                }
                else
                {
                    @:No ingredients found.   
                }
            </div>
            <h3>Summary</h3>
            <div>
                @Model.Recipe.Summary
            </div>
            <h3>Instructions</h3>
            <div>
                @Model.Recipe.Instructions
            </div>
        </div>
    
        if (Model.PagingInfo.HasNextPage)
        {
            <span class="pseudoLink" onclick="ShiftRecipe(1)" style="float: right;">&gt;</span>
        }
        
        <script type="text/javascript">
            var arrowSearchURL = "@Url.Action("Selector", "Recipe", new { SearchString = @Model.SearchString, Page = "PageValue", Field = @Model.Field })".replace(/&amp;/g, "&");
            var page = @Model.PagingInfo.CurrentPage;

            function ShiftRecipe(direction)
            {
                var SelectorContent = $("#SelectorContent");

                SelectorContent.html("<img src=\"@Url.Content("~/Content/Images/Ajax/Loader.gif")\" alt=\"\" />");

                $.ajax(
                    { 
                        url: arrowSearchURL.replace("PageValue", page + direction),
                        success: function (response)
                        {
                            SelectorContent.html(response);
                        },
                        error: function (response)
                        {
                            SelectorContent.html("An error occured while searching for the ingredient");
                        }
                    }
                )

                page = page + direction;
            }
        </script>

        <script type="text/javascript">
            $("#RecipeSelector").click(function (event) {
                $("input[name=@Model.Field]").val("@Model.Recipe.Name");
                $("input[name=@(Model.Field + "ID")]").val("@Model.Recipe.RecipeID");
            }
            );
        </script>
    }
    else
    {
        @:No recipe found.
    }
    <div style="width: 100%; clear: both;"></div>
</div>

